<template>
    <el-col :span="Number(colspan)">
        <el-form-item
            :prop="name"
            :label-width="labelWidth + 'px'"
            :label="label"
            :title="label"
            v-show="property.p.indexOf('H') === -1">
            <div class="ep-ymd" @change="onChange" @blur="onBlur" @focus="onFocus">
                <div :class="{'item-33':type == 'YY-MM-DD','item-50':type == 'YY-MM'}" class="ep-ymd-item"><el-input :disabled="property.p.indexOf('D') >= 0" :id="name + '1'" v-model="ymd[0]" placeholder="请输入年"></el-input><span>年</span></div>
                <div :class="{'item-33':type == 'YY-MM-DD','item-50':type == 'YY-MM'}" class="ep-ymd-item" v-if="type == 'YY-MM' || type == 'YY-MM-DD'"><el-input :disabled="property.p.indexOf('D') >= 0" :id="name + '2'" v-model="ymd[1]" placeholder="请输入月"></el-input><span>月</span></div>
                <div :class="{'item-33':type == 'YY-MM-DD','item-50':type == 'YY-MM'}" class="ep-ymd-item" v-if="type == 'YY-MM-DD'"><el-input :disabled="property.p.indexOf('D') >= 0" :id="name + '3'" v-model="ymd[2]" placeholder="请输入日"></el-input><span>日</span></div>
                <input type="hidden" v-model="property.value"/>
            </div>

        </el-form-item>
    </el-col>
</template>

<script type="es6">

    export default {
        props: {
            type:{
                type: String,
                default: 'YY-MM-DD'
            },
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ""
            },
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            },
            isRed: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                ymd:[]
            }
        },
        computed: {
            id() {
                return Math.random();
            }
        },
        watch: {
            ymd: {
                handler(value) {
                    this.getValue(value);
                },
                deep: true
            },
            'property.value': {
                handler(value) {
                    // console.log(this.id)
                    this.ymd = value.split('-');
                },
                deep: true
            }
        },
        mounted() {
            // document.getElementById(this.name + '1').style.color = this.isRed ? 'red' : '';
            // document.getElementById(this.name + '2').style.color = this.isRed ? 'red' : '';
            // document.getElementById(this.name + '3').style.color = this.isRed ? 'red' : '';
        },
        methods: {
            /**
             * 表单赋值
             */
            getValue(value) {
                let list = [];
                value.forEach(item => {
                    list.push(item);
                });
                this.property.value = list.join('-');
            },
            /**
             * 点击事件
             */
            onClick() {
                if (!this.isClick) return;
                let obj = {
                    path: this.$route.path + '/doQuery/' + this.name,
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    },
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 失去焦点
             */
            onBlur() {
                if (!this.isBlur) return;
                let obj = {
                    path: this.$route.path + '/blur/' + this.name,
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 获取焦点
             */
            onFocus() {
                if (!this.isFocus) return;
                let obj = {
                    path: this.$route.path + '/focus/' + this.name,
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less">
    .ep-ymd{
        display: flex;
        flex-wrap:wrap;
        overflow:hidden\0;
        .ep-ymd-item{
            /*flex: 0 0 100%;*/
            display: flex;
            float:left\0;
            width:30%\0;
            .el-input{
                width:75%\0;
                flex:0 0 70%;
                float:left\0;
            }
            span{
                width:25%\0;
                flex:0 0 30%;
                float:left\0;
                text-align:center;
            }
        }
    }
    .item-33{
        flex: 0 0 33%!important;
    }
    .item-50{
        flex: 0 0 50%!important;
    }
</style>
